<template>
  <div class="app-container">
    <div>
      <el-tabs v-model="mainTab" type="border-card" style="padding: 20px">
        <!-- 应收计划 -->
        <el-tab-pane label="应收计划" name="receivable">
          <el-tabs v-model="receivableTab" @tab-change="onReceivableTabChange">
            <el-tab-pane label="月度应收" name="month">
              <el-form :inline="true" :model="query" class="query-form" @submit.prevent>
                <el-form-item label="年月">
                  <el-date-picker
                    v-model="query.month"
                    type="month"
                    value-format="YYYY-MM"
                    placeholder="请选择年月"
                    style="width: 120px"
                  />
                </el-form-item>
                <el-form-item label="租户名">
                  <el-input
                    v-model="query.qymc"
                    placeholder="请输入租户名"
                    style="width: 120px"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="getList">查询</el-button>
                  <el-button @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-form>
              <!-- 数据看板 -->
              <div class="dashboard">
                <div class="dashboard-row">
                  <div class="dashboard-item board-blue">
                    <span class="label">当月总电费</span>
                    <span class="value">{{ dashboard.dbjsdf }}</span>
                  </div>
                  <div class="dashboard-item board-green">
                    <span class="label">公共电费</span>
                    <span class="value">{{ dashboard.dbgsdf }}</span>
                  </div>
                   <div class="dashboard-item board-orange">
                    <span class="label">租用应收</span>
                    <span class="value highlight">{{ dashboard.hkzyje }}</span>
                  </div>
                  <div class="dashboard-item board-blue">
                    <span class="label">租用已收</span>
                    <span class="value">{{ dashboard.hkysje }}</span>
                  </div>
                  <div class="dashboard-item board-red">
                    <span class="label">租用未收</span>
                    <span class="value">{{ dashboard.hkwsje }}</span>
                  </div>
                </div>
              
              </div>
              <!-- 明细列表 -->
              <el-table :data="list" style="margin-top: 10px">
                <el-table-column prop="zt" label="载体" align="center" width="120" />
                <el-table-column
                  prop="qymc"
                  label="租户"
                  align="center"
                  width="300"
                  show-overflow-tooltip
                />
                <el-table-column prop="jflx" label="缴费类型" align="center" />

                <el-table-column
                  label="电费周期"
                  align="center"
                  width="300"
                  :formatter="(row) => `${row.hkks || '--'}至${row.hkjs || '--'}`"
                />
                <el-table-column prop="hklx" label="费用类型" align="center" />

                <el-table-column prop="hkrq" label="应交日" align="center" width="150" />
                <el-table-column prop="hkzt" label="状态" align="center" width="140">
                  <template #default="scope">
                    <span
                      :style="{
                        color:
                          scope.row.hkzt === '已收款'
                            ? '#67C23A'
                            : scope.row.hkzt === '未收款'
                            ? '#F56C6C'
                            : '#E6A23C',
                      }"
                    >
                      {{ scope.row.hkzt || "未收款" }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="wsje"
                  label="未交金额"
                  align="center"
                  width="150"
                />
                <el-table-column label="操作" fixed="right" align="center" width="120">
                  <template #default="scope">
                    <el-button type="primary" size="small" @click="openDrawer(scope.row)"
                      >查看缴费情况</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                v-show="total > 0"
                :total="total"
                v-model:pageNum="query.pageNum"
                v-model:limit="query.pageSize"
                @pagination="getList"
              />
            </el-tab-pane>
            <el-tab-pane label="年度拖欠" name="year">
              <el-form
                :inline="true"
                :model="yearQuery"
                class="query-form"
                @submit.prevent
              >
                <el-form-item label="年份">
                  <el-date-picker
                    v-model="yearQuery.year"
                    type="year"
                    value-format="YYYY"
                    placeholder="请选择年份"
                    style="width: 120px"
                    @change="getYearNav"
                  />
                </el-form-item>
                <el-form-item label="租户名">
                  <el-input
                    v-model="yearQuery.qymc"
                    placeholder="请输入租户名"
                    style="width: 120px"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="getYearList">查询</el-button>
                  <el-button @click="resetYearQuery">重置</el-button>
                </el-form-item>
              </el-form>
              <!-- 年度指标导航条 -->
              <div class="dashboard">
                <div class="dashboard-row">
                  <div class="dashboard-item board-blue">
                    <span class="label">当年总电费</span>
                    <span class="value">{{ yearNav.dbjsdf }}</span>
                  </div>
                  <div class="dashboard-item board-green">
                    <span class="label">公共电费</span>
                    <span class="value">{{ yearNav.dbgsdf }}</span>
                  </div>
                   <div class="dashboard-item board-orange">
                    <span class="label">租用应收</span>
                    <span class="value highlight">{{ yearNav.hkzyje }}</span>
                  </div>
                  <div class="dashboard-item board-blue">
                    <span class="label">租用已收</span>
                    <span class="value">{{ yearNav.hkysje }}</span>
                  </div>
                  <div class="dashboard-item board-red">
                    <span class="label">租用未收</span>
                    <span class="value" >{{
                      yearNav.hkwsje
                    }}</span>
                  </div>
                </div>
                <!-- <div class="dashboard-row">
                 
                </div> -->
              </div>
              <!-- 年度拖欠列表 -->
              <el-table :data="yearList" border style="margin-top: 10px">
                <el-table-column prop="zt" label="载体" align="center" width="120" />
                <el-table-column
                  prop="qymc"
                  label="租户"
                  align="center"
                  width="300"
                  show-overflow-tooltip
                />
                 <el-table-column prop="jflx" label="缴费类型" align="center" />
                <el-table-column
                  width="300"
                  label="电费周期"
                  align="center"
                  :formatter="(row) => `${row.hkks || '--'}至${row.hkjs || '--'}`"
                />
                <el-table-column
                  prop="hklx"
                  label="费用类型"
                  align="center"
                  width="120"
                />
                <el-table-column prop="hkrq" label="应交日" align="center" width="150" />
                <el-table-column prop="hkzt" label="状态" align="center" width="140">
                  <template #default="scope">
                    <span
                      :style="{
                        color:
                          scope.row.hkzt === '已收款'
                            ? '#67C23A'
                            : scope.row.hkzt === '未收款'
                            ? '#F56C6C'
                            : '#E6A23C',
                      }"
                    >
                      {{ scope.row.hkzt || "未收款" }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="wsje"
                  label="未交金额"
                  align="center"
                  width="150"
                />
                <el-table-column label="操作" fixed="right" align="center" width="140">
                  <template #default="scope">
                    <el-button type="primary" size="small" @click="openDrawer(scope.row)"
                      >查看缴费情况</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                v-show="yearTotal > 0"
                :total="yearTotal"
                v-model:pageNum="yearQuery.pageNum"
                v-model:limit="yearQuery.pageSize"
                @pagination="getYearList"
              />
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <!-- 已收明细 -->
        <el-tab-pane label="已收明细" name="received">
          <el-tabs v-model="receivedTab" @tab-change="onReceivedTabChange">
            <el-tab-pane label="已收明细" name="received">
              <el-form
                :inline="true"
                :model="receivedQuery"
                class="query-form"
                @submit.prevent
              >
                <el-form-item label="年月">
                  <el-date-picker
                    v-model="receivedQuery.month"
                    type="month"
                    value-format="YYYY-MM"
                    placeholder="请选择年月"
                    style="width: 120px"
                  />
                </el-form-item>
                <el-form-item label="租户名">
                  <el-input
                    v-model="receivedQuery.qymc"
                    placeholder="请输入租户名"
                    style="width: 120px"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="getReceivedList">查询</el-button>
                  <el-button @click="resetReceivedQuery">重置</el-button>
                </el-form-item>
              </el-form>
              <!-- 数据看板 -->
              <div class="dashboard beautify-board">
                <div class="dashboard-row">
                  <div class="dashboard-item board-blue">
                    <span class="label">租用已收</span>
                    <span class="value highlight">{{ receivedBoard.ysjeb }}</span>
                  </div>
                  <div class="dashboard-item board-green">
                    <span class="label">已开票额</span>
                    <span class="value">{{ receivedBoard.kpje }}</span>
                  </div>
                  <div class="dashboard-item board-orange">
                    <span class="label">未开票额</span>
                    <span class="value">{{ receivedBoard.wkpje }}</span>
                  </div>
                </div>
              </div>
              <!-- 明细列表 -->
              <el-table :data="receivedList" style="margin-top: 10px">
                <el-table-column prop="zt" label="载体" align="center" />
                <el-table-column
                  prop="qymc"
                  label="租户"
                  align="center"
                  width="300"
                  show-overflow-tooltip
                />
                <el-table-column prop="nf" label="归属年" align="center" width="80" />
                <el-table-column prop="yf" label="归属月" align="center" width="80" />
                <el-table-column
                  prop="hkzt"
                  label="收款状态"
                  align="center"
                  width="100"
                />
                <el-table-column prop="hklx" label="费用类型" align="center" />
                <el-table-column
                  prop="sjrq"
                  label="收款日期"
                  align="center"
                  width="120"
                />
                <el-table-column
                  prop="ysje"
                  label="收款金额"
                  align="center"
                  width="120"
                />
                <el-table-column
                  prop="hkrq"
                  label="应交日期"
                  align="center"
                  width="120"
                />
                <el-table-column
                  prop="hkks"
                  label="电费周期起"
                  align="center"
                  width="150"
                />
                <el-table-column
                  prop="hkjs"
                  label="电费周期止"
                  align="center"
                  width="150"
                />
                <el-table-column prop="hkbz" label="备注" align="center" />
                <el-table-column label="操作" fixed="right" align="center" width="140">
                  <template #default="scope">
                    <el-button type="primary" size="small" @click="openDrawer(scope.row)"
                      >查看缴费情况</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                v-show="receivedTotal > 0"
                :total="receivedTotal"
                v-model:pageNum="receivedQuery.pageNum"
                v-model:limit="receivedQuery.pageSize"
                @pagination="getReceivedList"
              />
            </el-tab-pane>
            <el-tab-pane label="开票明细" name="invoice">
              <el-tabs v-model="invoiceTab" type="card" @tab-change="onInvoiceTabChange">
                <el-tab-pane label="已开票" name="invoiced">
                  <el-form
                    :inline="true"
                    :model="invoiceQuery"
                    class="query-form"
                    @submit.prevent
                  >
                    <el-form-item label="年月">
                      <el-date-picker
                        v-model="invoiceQuery.month"
                        type="month"
                        value-format="YYYY-MM"
                        placeholder="请选择年月"
                        style="width: 120px"
                      />
                    </el-form-item>
                    <el-form-item label="租户名">
                      <el-input
                        v-model="invoiceQuery.qymc"
                        placeholder="请输入租户名"
                        style="width: 120px"
                      />
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="getInvoiceList">查询</el-button>
                      <el-button @click="resetInvoiceQuery">重置</el-button>
                    </el-form-item>
                  </el-form>
                  <el-table :data="invoiceList" style="margin-top: 10px">
                    <el-table-column prop="zt" label="载体" align="center" width="120" />
                    <el-table-column
                      prop="qymc"
                      label="租户"
                      align="center"
                      width="320"
                      show-overflow-tooltip
                    />
                    <el-table-column
                      prop="sjrq"
                      label="收款日期"
                      align="center"
                      width="120"
                    />
                    <el-table-column prop="ysje" label="收款金额" align="center" />
                    <el-table-column
                      prop="kpbh"
                      label="发票号"
                      align="center"
                      width="320"
                    />
                    <el-table-column
                      prop="kpname"
                      label="开票申请人"
                      align="center"
                      width="120"
                    />

                    <el-table-column
                      prop="kprq"
                      label="开票日期"
                      align="center"
                      width="120"
                    />
                    <el-table-column
                      label="操作"
                      fixed="right"
                      align="center"
                      width="120"
                    >
                      <template #default="scope">
                        <el-button
                          type="primary"
                          size="small"
                          @click="openDrawer(scope.row)"
                          >查看缴费情况</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                  <pagination
                    v-show="invoiceTotal > 0"
                    :total="invoiceTotal"
                    v-model:pageNum="invoiceQuery.pageNum"
                    v-model:limit="invoiceQuery.pageSize"
                    @pagination="getInvoiceList"
                  />
                </el-tab-pane>
                <el-tab-pane label="未开票" name="noInvoice">
                  <el-form
                    :inline="true"
                    :model="noInvoiceQuery"
                    class="query-form"
                    @submit.prevent
                  >
                    <el-form-item label="年份">
                      <el-date-picker
                        v-model="noInvoiceQuery.year"
                        type="year"
                        value-format="YYYY"
                        placeholder="请选择年份"
                        style="width: 120px"
                        @change="getNoInvoiceBoard"
                      />
                    </el-form-item>
                    <el-form-item label="租户名">
                      <el-input
                        v-model="noInvoiceQuery.qymc"
                        placeholder="请输入租户名"
                        style="width: 120px"
                      />
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="getNoInvoiceList">查询</el-button>
                      <el-button @click="resetNoInvoiceQuery">重置</el-button>
                    </el-form-item>
                  </el-form>
                  <!-- 数据看板 -->
                  <div class="dashboard beautify-board">
                    <div class="dashboard-row">
                      <div class="dashboard-item board-blue">
                        <span class="label">租用已收</span>
                        <span class="value">{{ noInvoiceBoard.ysjeb }}</span>
                      </div>
                      <div class="dashboard-item board-green">
                        <span class="label">已开票额</span>
                        <span class="value">{{ noInvoiceBoard.kpje }}</span>
                      </div>
                      <div class="dashboard-item board-orange">
                        <span class="label">未开票额</span>
                        <span class="value highlight" style="color: #e43d33">{{
                          noInvoiceBoard.wkpje
                        }}</span>
                      </div>
                    </div>
                  </div>
                  <el-table :data="noInvoiceList" style="margin-top: 10px">
                    <el-table-column prop="zt" label="载体" align="center" width="120" />
                    <el-table-column
                      prop="qymc"
                      label="租户"
                      align="center"
                      width="300"
                      show-overflow-tooltip
                    />
                    <el-table-column
                      prop="sjrq"
                      label="收款日期"
                      align="center"
                      width="120"
                    />
                    <el-table-column
                      prop="ysje"
                      label="收款金额"
                      align="center"
                      width="120"
                    />
                    <el-table-column prop="wkpbz" label="未开票原因" align="center" />
                    <el-table-column
                      label="操作"
                      fixed="right"
                      align="center"
                      width="120"
                    >
                      <template #default="scope">
                        <el-button
                          type="primary"
                          size="small"
                          @click="openDrawer(scope.row)"
                          >查看缴费情况</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                  <pagination
                    v-show="noInvoiceTotal > 0"
                    :total="noInvoiceTotal"
                    v-model:pageNum="noInvoiceQuery.pageNum"
                    v-model:limit="noInvoiceQuery.pageSize"
                    @pagination="getNoInvoiceList"
                  />
                </el-tab-pane>
              </el-tabs>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
      <!-- 载体下拉选择框，悬浮在主tab右侧 -->
      <div style="position: absolute; left: 240px; top: 45px">
        <el-select
          v-model="selectedCarrier"
          filterable
          clearable
          placeholder="请选择载体"
          style="margin-left: 20px; min-width: 180px"
          @change="onCarrierChange"
        >
          <el-option
            v-for="item in carrierList"
            :key="item.nra"
            :label="item.nr"
            :value="item.nr"
          />
        </el-select>
      </div>
    </div>

    <!-- 抽屉 -->
    <el-drawer
      v-model="drawerVisible"
      :title="drawerQymc + ' - 缴费详情'"
      size="80%"
      direction="rtl"
      destroy-on-close
    >
      <el-tabs v-model="drawerTab" type="border-card">
        <!-- 回款情况 -->
        <el-tab-pane label="回款情况" name="hk">
          <div>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="序号">{{
                customerBoard.dqid
              }}</el-descriptions-item>
              <el-descriptions-item label="项目名称">{{
                customerBoard.zt
              }}</el-descriptions-item>
              <el-descriptions-item label="客户名称">{{
                customerBoard.qymc
              }}</el-descriptions-item>
              <el-descriptions-item label="客户编号">{{
                customerBoard.khbh
              }}</el-descriptions-item>
              <el-descriptions-item label="缴费方式">
                <span v-if="customerBoard.jflx == 1">后付费</span>
                <span v-else-if="customerBoard.jflx == 2">预付费</span>
              </el-descriptions-item>
              <el-descriptions-item label="应交电费">{{
                customerBoard.hkjeb
              }}</el-descriptions-item>
              <el-descriptions-item label="已交电费">{{
                customerBoard.ysjec
              }}</el-descriptions-item>
              <el-descriptions-item label="未交电费">{{
                customerBoard.wsjec
              }}</el-descriptions-item>
               <el-descriptions-item label="滞纳金">{{
                customerBoard.znjec
              }}</el-descriptions-item>
               <el-descriptions-item label="总充值" v-if="customerBoard.jflx==2">{{
                customerBoard.zczjee
              }}</el-descriptions-item>
              <el-descriptions-item label="已开票金额">{{
                customerBoard.kpjed
              }}</el-descriptions-item>
              <el-descriptions-item label="未开票金额">{{
                customerBoard.wkpjed
              }}</el-descriptions-item>
                   <el-descriptions-item label="待开票金额">{{
                customerBoard.dkpjec
              }}</el-descriptions-item>
            </el-descriptions>
          </div>
          <el-tabs v-model="hkTab" style="margin-top: 20px">
            <el-tab-pane label="未收电费" name="unpaid">
              <!-- 新增：立即缴费按钮 -->
              <div style="margin-bottom: 10px; text-align: left">
                <el-button type="primary" :disabled="selectedUnpaidRows.length === 0" @click="openBatchPayDialog" v-if="customerBoard.jflx == 1">立即缴费</el-button>
                <el-button type="primary"  @click="openBatchPayDialog" v-if="customerBoard.jflx == 2">立即充值</el-button>
              </div>
              <el-table :data="unpaidList" style="margin-top: 10px" @selection-change="handleUnpaidSelectionChange">
                <el-table-column type="selection" width="50" v-if="customerBoard.jflx == 1" />
                <el-table-column
                  prop="hkid"
                  label="电费单号"
                  align="center"
                  width="120"
                />
                <el-table-column
                  label="电费统计周期"
                  align="center"
                  width="300"
                  :formatter="(row) => `${row.hkks || '--'}至${row.hkjs || '--'}`"
                />
                <el-table-column prop="hklx" label="费用类型" align="center" />
                <el-table-column
                  prop="hkrq"
                  label="电费应交日期"
                  align="center"
                  width="150"
                />
                <el-table-column
                  prop="hkzt"
                  label="缴费状态"
                  align="center"
                  width="120"
                />
                <el-table-column
                  prop="wsje"
                  label="未交电费"
                  align="center"
                  width="120"
                />
                
                <el-table-column
                  prop="znysje"
                  label="滞纳金"
                  align="center"
                  width="120"
                />
<!-- 
                <el-table-column label="操作" fixed="right" align="center" width="120">
                  <template #default="scope">
                    <el-button
                      v-if="customerBoard.jflx == 1"
                      type="primary"
                      size="small"
                      @click="openPayDialog(scope.row)"
                      style="margin-left: 4px"
                      >立即缴费</el-button><el-button
                      type="primary"
                      v-if="customerBoard.jflx == 2"
                      size="small"
                      @click="openPayDialog(scope.row)"
                      style="margin-left: 4px"
                      >立即充值</el-button
                    >
                  </template>
                </el-table-column> -->
              </el-table>
              <div style="margin: 10px 0; text-align: right">
                电费未交金额合计为：<span style="color: #e43d33">{{
                  unpaidTotalAmmeter
                }}</span>
                元
              </div>
              <pagination
                v-show="unpaidTotal > 0"
                :total="unpaidTotal"
                v-model:pageNum="unpaidPage"
                v-model:limit="unpaidPageSize"
                @pagination="handleUnpaidPageChange"
              />
            </el-tab-pane>
            <el-tab-pane label="已收电费" name="paid">
              <el-table :data="paidList" style="margin-top: 10px">
                <el-table-column
                  prop="hkid"
                  label="电费单号"
                  align="center"
                  width="120"
                />
                <el-table-column
                  width="300"
                  label="电费统计周期"
                  align="center"
                  :formatter="(row) => `${row.hkks || '--'}至${row.hkjs || '--'}`"
                />
                <el-table-column prop="hklx" label="费用类型" align="center" />
                <el-table-column
                  prop="hkrq"
                  label="电费应交日期"
                  align="center"
                  width="150"
                />
                <el-table-column
                  prop="hkzt"
                  label="缴费状态"
                  align="center"
                  width="120"
                />
                <el-table-column
                  prop="hkje"
                  label="未交电费"
                  align="center"
                  width="120"
                />
                <!-- <el-table-column label="操作" fixed="right" align="center" width="80">
                  <template #default="scope">
                  </template>
                </el-table-column> -->
              </el-table>
              <div style="margin: 10px 0; text-align: right">
                电费已交金额合计为：<span style="color: #67c23a">{{
                  paidTotalAmmeter
                }}</span>
                元
              </div>
              <pagination
                v-show="paidTotal > 0"
                :total="paidTotal"
                v-model:pageNum="paidPage"
                v-model:limit="paidPageSize"
                @pagination="handlePaidPageChange"
              />
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <!-- 开票明细 -->
        <el-tab-pane label="开票明细" name="invoice">
          <div class="dashboard beautify-board" style="margin-bottom: 18px">
            <div class="dashboard-row">
              <div class="dashboard-item board-blue">
                <span class="label">租用已收</span>
                <span class="value highlight">{{ invoiceBoard.ysjeb }}</span>
              </div>
              <div class="dashboard-item board-green">
                <span class="label">已开票额</span>
                <span class="value">{{ invoiceBoard.kpje }}</span>
              </div>
              <div class="dashboard-item board-orange">
                <span class="label">未开票额</span>
                <span class="value">{{ invoiceBoard.wkpje }}</span>
              </div>
            </div>
          </div>
          <el-table :data="invoiceListDrawer" style="margin-top: 10px">
            <el-table-column prop="qymc" label="开票公司" align="center" width="300" />
            <el-table-column prop="pjlx" label="票据类型" align="center" width="120" />
            <el-table-column prop="hklx" label="回款类型" align="center" />
            <el-table-column prop="pjhm" label="票据号码" align="center" width="300" />
            <el-table-column prop="kprq" label="开票日期" align="center" />
            <el-table-column prop="cjname" label="操作人" align="center" width="120" />

            <el-table-column prop="pjje" label="开票金额" align="center" width="120" />
          </el-table>
          <pagination
            v-show="invoiceTotalDrawer > 0"
            :total="invoiceTotalDrawer"
            v-model:pageNum="invoicePage"
            v-model:limit="invoicePageSize"
            @pagination="handleInvoicePageChange"
          />
        </el-tab-pane>
        <!-- 添加开票资料 -->
        <el-tab-pane label="添加开票资料" name="add">
          <el-descriptions v-if="zhInfo" :column="2" border>
            <el-descriptions-item label="租户名称">{{
              zhInfo.qymc
            }}</el-descriptions-item>
            <el-descriptions-item label="统一信用代码">{{
              zhInfo.yyzzh
            }}</el-descriptions-item>
            <el-descriptions-item label="载体项目">{{ zhInfo.zt }}</el-descriptions-item>
            <el-descriptions-item label="缴费类型">
              <span v-if="zhInfo.jflx == 1">后付费</span>
              <span v-else-if="zhInfo.jflx == 2">预付费</span>
            </el-descriptions-item>
            <el-descriptions-item label="发票抬头企业名称">{{
              zhInfo.kpqymc
            }}</el-descriptions-item>
            <el-descriptions-item label="开票税号">{{
              zhInfo.kpsh
            }}</el-descriptions-item>
          </el-descriptions>
          <div v-else style="color: #999; padding: 40px 0; text-align: center">
            暂未补充
          </div>
          <el-button
            type="primary"
            style="margin-top: 20px"
            @click="openInvoiceEditDialog"
          >
            补充开票信息
          </el-button>
        </el-tab-pane>
      </el-tabs>
      <!-- 补充开票信息弹窗 -->
      <el-dialog
        title="补充开票信息"
        v-model="invoiceEditDialogVisible"
        width="750px"
        append-to-body
      >
        <el-form
          :model="invoiceForm"
          ref="invoiceFormRef"
          label-position="top"
          label-width="120px"
        >
          <el-form-item label="租户名称" prop="qymc">
            <el-input v-model="invoiceForm.qymc" placeholder="请输入租户名称" disabled />
          </el-form-item>
          <el-form-item label="统一信用代码" prop="yyzzh">
            <el-input v-model="invoiceForm.yyzzh" placeholder="请输入统一信用代码" />
          </el-form-item>
          <el-form-item label="载体项目" prop="zt">
            <el-input v-model="invoiceForm.zt" placeholder="请输入载体项目" />
          </el-form-item>
          <el-form-item label="缴费类型" prop="jflx">
            <el-radio-group v-model="invoiceForm.jflx">
              <el-radio :label="1">后付费</el-radio>
              <el-radio :label="2">预付费</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="发票抬头企业名称" prop="kpqymc">
            <el-input v-model="invoiceForm.kpqymc" placeholder="请输入发票抬头企业名称" />
          </el-form-item>
          <el-form-item label="开票税号" prop="kpsh">
            <el-input v-model="invoiceForm.kpsh" placeholder="请输入开票税号" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="invoiceEditDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitInvoiceForm">确定</el-button>
        </template>
      </el-dialog>

  
      <!-- 新增：批量缴费弹窗 -->
      <el-dialog
        title="批量缴费"
        v-model="batchPayDialogVisible"
        width="400px"
        :close-on-click-modal="false"
      >
        <div style="margin-bottom: 10px">
          <div>总未收金额：<span style="color: #e43d33">{{ batchPayTotalWsje }}</span> 元</div>
          <div>总滞纳金：<span style="color: #faad14">{{ batchPayTotalZnysje }}</span> 元</div>
        </div>
        <el-form :model="batchPayForm" label-width="90px">
          <el-form-item label="缴费金额" prop="ysje">
            <el-input v-model="batchPayForm.ysje" placeholder="请输入缴费金额" />
          </el-form-item>
          <el-form-item label="资金来源" prop="zjly">
            <el-select v-model="batchPayForm.zjly" placeholder="请选择资金来源" style="width: 100%">
              <el-option v-for="item in zjlyOptionsPay" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="batchPayDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitBatchPay">确定缴费</el-button>
        </template>
      </el-dialog>
      <!-- 立即充值弹窗 -->
      <el-dialog
        title="立即充值"
        v-model="rechargeDialogVisible"
        width="400px"
        :close-on-click-modal="false"
      >
        <el-form :model="rechargeForm" label-width="90px">
          <el-form-item label="充值金额" prop="czje">
            <el-input v-model="rechargeForm.czje" placeholder="请输入充值金额" />
          </el-form-item>
          <el-form-item label="费用类型" prop="fylx">
            <el-select v-model="rechargeForm.fylx" placeholder="请选择费用类型" style="width: 100%">
              <el-option v-for="item in rechargeTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="资金来源" prop="zjly">
            <el-select v-model="rechargeForm.zjly" placeholder="请选择资金来源" style="width: 100%">
              <el-option v-for="item in zjlyOptionsRecharge" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="rechargeDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitRecharge">确定</el-button>
        </template>
      </el-dialog>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import {
  receivableHome,
  receivableMonthList,
  receivableYearNav,
  receivableYearList,
  receivableDetailBoard,
  receivableDetailMonthList,
  receivableDetailInvoiceList,
  receivableDetailNoInvoiceBoard,
  receivableDetailNoInvoiceList,
  receivableDetailCustomerBoard,
  receivableDetailCustomerList,
  receivableDetailCustomerReceivedList,
  receivableDetailCustomerInvoiceList,
  receivableDetailCustomerInvoiceBoard,
  simulatePayment,
  simulateRecharge
} from "@/api/bill";
import { selectzt } from "@/api/carrier/ammeter";
import { selectzh, addInvoice } from "@/api/carrier/index";
import { parseTime } from "@/utils/ruoyi";
const { proxy } = getCurrentInstance();

// 主tab
const mainTab = ref("receivable");

// 应收计划tab
const receivableTab = ref("month");

// 已收明细tab
const receivedTab = ref("received");

// 开票明细tab
const invoiceTab = ref("invoiced");

// 载体相关
const carrierList = ref([]);
const selectedCarrier = ref();
const carrierNr = ref(); // 载体nr

function getLastMonthStr() {
  const d = new Date();
  d.setDate(1); // 设置为当月第一天
  d.setMonth(d.getMonth() - 1);

  console.log(parseTime(d, "{y}-{m}"), parseTime(d), d.getMonth());
  return parseTime(d, "{y}-{m}");
}
function getThisYearStr() {
  return String(new Date().getFullYear());
}

// 应收计划
const query = reactive({
  month: getLastMonthStr(),
  qymc: "",
  pageNum: 1,
  pageSize: 10,
  zt: undefined,
});
const dashboard = ref({});
const list = ref([]);
const total = ref(0);

const yearQuery = reactive({
  year: getThisYearStr(),
  qymc: "",
  pageNum: 1,
  pageSize: 10,
  zt: undefined,
});
const yearNav = ref({});
const yearList = ref([]);
const yearTotal = ref(0);

// 已收明细
const receivedQuery = reactive({
  month: getLastMonthStr(),
  qymc: "",
  pageNum: 1,
  pageSize: 10,
  zt: undefined,
});
const receivedBoard = ref({});
const receivedList = ref([]);
const receivedTotal = ref(0);

// 已开票
const invoiceQuery = reactive({
  month: getLastMonthStr(),
  qymc: "",
  pageNum: 1,
  pageSize: 10,
  zt: undefined,
});
const invoiceList = ref([]);
const invoiceTotal = ref(0);

// 未开票
const noInvoiceQuery = reactive({
  year: getThisYearStr(),
  qymc: "",
  pageNum: 1,
  pageSize: 10,
  zt: undefined,
});
const noInvoiceBoard = ref({});
const noInvoiceList = ref([]);
const noInvoiceTotal = ref(0);

// 载体选择
function getCarrierList() {
  selectzt({
    pageNum: 1,
    pageSize: 100,
    lxbh: 1,
  }).then((res) => {
    carrierList.value = res.data?.list || [];
    if (carrierList.value.length > 0) {
      selectedCarrier.value = carrierList.value[0].nr;
      carrierNr.value = carrierList.value[0].nr;
      setAllZt(carrierList.value[0].nr);
      refreshCurrentTab();
    }
  });
}
function onCarrierChange(val) {
  const found = carrierList.value.find((item) => item.nr === val);
  carrierNr.value = found ? found.nr : undefined;
  setAllZt(carrierNr.value);
  refreshCurrentTab();
}
function setAllZt(nr) {
  query.zt = nr;
  yearQuery.zt = nr;
  receivedQuery.zt = nr;
  invoiceQuery.zt = nr;
  noInvoiceQuery.zt = nr;
}
function refreshCurrentTab() {
  if (mainTab.value === "receivable") {
    if (receivableTab.value === "month") {
      getList();
    } else {
      getYearNav();
      getYearList();
    }
  } else if (mainTab.value === "received") {
    if (receivedTab.value === "received") {
      getReceivedList();
    } else if (receivedTab.value === "invoice") {
      if (invoiceTab.value === "invoiced") {
        getInvoiceList();
      } else {
        getNoInvoiceBoard();
        getNoInvoiceList();
      }
    }
  }
}

// 查询与重置
function getList() {
  receivableHome({ month: query.month, zt: query.zt }).then((res) => {
    dashboard.value = res.data || {};
  });
  receivableMonthList({
    month: query.month,
    qymc: query.qymc,
    pageNum: query.pageNum,
    pageSize: query.pageSize,
    zt: query.zt,
  }).then((res) => {
    const arr = res.data?.list || [];
    list.value = arr.map((item) => ({
      ...item,
      hkrq: item.hkrq ? parseTime(item.hkrq, "{y}-{m}-{d}") : "--",
      hkks: item.hkks ? parseTime(item.hkks, "{y}-{m}-{d}") : "--",
      hkjs: item.hkjs ? parseTime(item.hkjs, "{y}-{m}-{d}") : "--",
    }));
    total.value = res.data?.total || 0;
  });
}
function resetQuery() {
  query.month = getLastMonthStr();
  query.qymc = "";
  query.pageNum = 1;
  query.pageSize = 10;
  getList();
}
function onReceivableTabChange() {
  if (receivableTab.value === "month") {
    getList();
  } else if (receivableTab.value === "year") {
    getYearNav();
    getYearList();
  }
}
// 年度拖欠相关
function getYearNav() {
  receivableYearNav({ year: yearQuery.year, zt: yearQuery.zt }).then((res) => {
    yearNav.value = res.data || {};
  });
}
function getYearList() {
  receivableYearList({
    year: yearQuery.year,
    qymc: yearQuery.qymc,
    pageNum: yearQuery.pageNum,
    pageSize: yearQuery.pageSize,
    zt: yearQuery.zt,
  }).then((res) => {
    const arr = res.data?.list || [];
    yearList.value = arr.map((item) => ({
      ...item,
      hkrq: item.hkrq ? parseTime(item.hkrq, "{y}-{m}-{d}") : "--",
      hkks: item.hkks ? parseTime(item.hkks, "{y}-{m}-{d}") : "--",
      hkjs: item.hkjs ? parseTime(item.hkjs, "{y}-{m}-{d}") : "--",
    }));
    yearTotal.value = res.data?.total || 0;
  });
}
function resetYearQuery() {
  yearQuery.year = getThisYearStr();
  yearQuery.qymc = "";
  yearQuery.pageNum = 1;
  yearQuery.pageSize = 10;
  getYearNav();
  getYearList();
}

// 已收明细
function getReceivedList() {
  receivableDetailBoard({ month: receivedQuery.month, zt: receivedQuery.zt }).then(
    (res) => {
      receivedBoard.value = res.data || {};
    }
  );
  receivableDetailMonthList({
    month: receivedQuery.month,
    qymc: receivedQuery.qymc,
    pageNum: receivedQuery.pageNum,
    pageSize: receivedQuery.pageSize,
    zt: receivedQuery.zt,
  }).then((res) => {
    const arr = res.data?.list || [];
    receivedList.value = arr.map((item) => ({
      ...item,
      hkrq: item.hkrq ? parseTime(item.hkrq, "{y}-{m}-{d}") : "--",
      hkks: item.hkks ? parseTime(item.hkks, "{y}-{m}-{d}") : "--",
      hkjs: item.hkjs ? parseTime(item.hkjs, "{y}-{m}-{d}") : "--",
      sjrq: item.sjrq ? parseTime(item.sjrq, "{y}-{m}-{d}") : "--",
    }));
    receivedTotal.value = res.data?.total || 0;
  });
}
function resetReceivedQuery() {
  receivedQuery.month = getLastMonthStr();
  receivedQuery.qymc = "";
  receivedQuery.pageNum = 1;
  receivedQuery.pageSize = 10;
  getReceivedList();
}
function onReceivedTabChange() {
  if (receivedTab.value === "received") {
    getReceivedList();
  }
}

// 已开票
function getInvoiceList() {
  receivableDetailInvoiceList({
    month: invoiceQuery.month,
    qymc: invoiceQuery.qymc,
    pageNum: invoiceQuery.pageNum,
    pageSize: invoiceQuery.pageSize,
    zt: invoiceQuery.zt,
  }).then((res) => {
    const arr = res.data?.list || [];
    invoiceList.value = arr.map((item) => ({
      ...item,
      sjrq: item.sjrq ? parseTime(item.sjrq, "{y}-{m}-{d}") : "--",
      kprq: item.kprq ? parseTime(item.kprq, "{y}-{m}-{d}") : "--",
    }));
    invoiceTotal.value = res.data?.total || 0;
  });
}
function resetInvoiceQuery() {
  invoiceQuery.month = getLastMonthStr();
  invoiceQuery.qymc = "";
  invoiceQuery.pageNum = 1;
  invoiceQuery.pageSize = 10;
  getInvoiceList();
}
function onInvoiceTabChange() {
  if (invoiceTab.value === "invoiced") {
    getInvoiceList();
  } else if (invoiceTab.value === "noInvoice") {
    getNoInvoiceBoard();
    getNoInvoiceList();
  }
}

// 未开票
function getNoInvoiceBoard() {
  receivableDetailNoInvoiceBoard({
    year: noInvoiceQuery.year,
    zt: noInvoiceQuery.zt,
  }).then((res) => {
    noInvoiceBoard.value = res.data || {};
  });
}
function getNoInvoiceList() {
  receivableDetailNoInvoiceList({
    year: noInvoiceQuery.year,
    qymc: noInvoiceQuery.qymc,
    pageNum: noInvoiceQuery.pageNum,
    pageSize: noInvoiceQuery.pageSize,
    zt: noInvoiceQuery.zt,
  }).then((res) => {
    const arr = res.data?.list || [];
    noInvoiceList.value = arr.map((item) => ({
      ...item,
      sjrq: item.sjrq ? parseTime(item.sjrq, "{y}-{m}-{d}") : "--",
    }));
    noInvoiceTotal.value = res.data?.total || 0;
  });
}
function resetNoInvoiceQuery() {
  noInvoiceQuery.year = getThisYearStr();
  noInvoiceQuery.qymc = "";
  noInvoiceQuery.pageNum = 1;
  noInvoiceQuery.pageSize = 10;
  getNoInvoiceBoard();
  getNoInvoiceList();
}

// 抽屉相关
const drawerVisible = ref(false);
const drawerKhbh = ref("");
const drawerQymc = ref("");
const drawerTab = ref("hk"); // hk:回款情况, invoice:开票明细, add:添加开票资料

// 回款情况-上半部分
const customerBoard = ref({});
// 回款情况-下半tab
const hkTab = ref("unpaid"); // unpaid/paid
// 未收电费
const unpaidList = ref([]);
const unpaidTotal = ref(0);
const unpaidTotalAmmeter = ref(0);
const unpaidPage = ref(1);
const unpaidPageSize = ref(10);
// 已收电费
const paidList = ref([]);
const paidTotal = ref(0);
const paidTotalAmmeter = ref(0);
const paidPage = ref(1);
const paidPageSize = ref(10);
// 开票明细
const invoiceListDrawer = ref([]);
const invoiceTotalDrawer = ref(0);
const invoicePage = ref(1);
const invoicePageSize = ref(10);

// 添加开票资料
const zhInfo = ref(null);
const invoiceEditDialogVisible = ref(false);
const invoiceForm = reactive({
  qymc: "",
  khbh: "",
  yyzzh: "",
  zt: "",
  jflx: "",
  kpqymc: "",
  kpsh: "",
  kplx: "",
});
const invoiceFormRef = ref();

const invoiceBoard = ref({});

function openDrawer(row) {
  drawerKhbh.value = row.khbh;
  drawerQymc.value = row.qymc;
  drawerTab.value = "hk";
  drawerVisible.value = true;
  // 回款情况
  getCustomerBoard();
  getUnpaidList();
  getPaidList();
  getInvoiceListDrawer();
  getInvoiceBoard(); //
  getZhInfo();
}
function getCustomerBoard() {
  receivableDetailCustomerBoard({ khbh: drawerKhbh.value, zt: noInvoiceQuery.zt }).then(
    (res) => {
      console.log(res);
      customerBoard.value = res.data || {};
    }
  );
}
function getUnpaidList() {
  receivableDetailCustomerList({
    khbh: drawerKhbh.value,
    pageNum: unpaidPage.value,
    pageSize: unpaidPageSize.value,
    zt: noInvoiceQuery.zt,
  }).then((res) => {
    const arr = res.data?.["电费未收列表"].list || [];
    unpaidList.value = arr.map((item) => ({
      ...item,
      hkks: item.hkks ? parseTime(item.hkks, "{y}-{m}-{d}") : "--",
      hkjs: item.hkjs ? parseTime(item.hkjs, "{y}-{m}-{d}") : "--",
      hkrq: item.hkrq ? parseTime(item.hkrq, "{y}-{m}-{d}") : "--",
    }));

    console.log("111", res.data, res.data?.["电费未交金额合计为"]);
    unpaidTotalAmmeter.value = res.data?.["电费未交金额合计为"] || 0;
    unpaidTotal.value = res.data?.["电费未收列表"].total || 0;
  });
}
function getPaidList() {
  receivableDetailCustomerReceivedList({
    khbh: drawerKhbh.value,
    pageNum: paidPage.value,
    pageSize: paidPageSize.value,
    zt: noInvoiceQuery.zt,
  }).then((res) => {
    const arr = res.data?.["电费已收列表"].list || [];
    paidList.value = arr.map((item) => ({
      ...item,
      hkks: item.hkks ? parseTime(item.hkks, "{y}-{m}-{d}") : "--",
      hkjs: item.hkjs ? parseTime(item.hkjs, "{y}-{m}-{d}") : "--",
      hkrq: item.hkrq ? parseTime(item.hkrq, "{y}-{m}-{d}") : "--",
    }));
    paidTotal.value = res.data?.["电费已收列表"].total || 0;
    paidTotalAmmeter.value = res.data?.["电费已收金额合计为"] || 0;
  });
}
function getInvoiceListDrawer() {
  receivableDetailCustomerInvoiceList({
    khbh: drawerKhbh.value,
    pageNum: invoicePage.value,
    pageSize: invoicePageSize.value,
    zt: noInvoiceQuery.zt,
  }).then((res) => {
    const arr = res.data?.list || [];
    invoiceListDrawer.value = arr.map((item) => ({
      ...item,
      kprq: item.kprq ? parseTime(item.kprq, "{y}-{m}-{d}") : "--",
    }));
    invoiceTotalDrawer.value = res.data?.total || 0;
  });
}
function getZhInfo() {
  selectzh({ khbh: drawerKhbh.value }).then((res) => {
    zhInfo.value = res.data || null;
  });
}
function handleUnpaidPageChange(page) {
  unpaidPage.value = page;
  getUnpaidList();
}
function handlePaidPageChange(page) {
  paidPage.value = page;
  getPaidList();
}
function handleInvoicePageChange(page) {
  invoicePage.value = page;
  getInvoiceListDrawer();
}
function openInvoiceEditDialog() {
  if (zhInfo.value) {
    Object.assign(invoiceForm, zhInfo.value);
  } else {
    Object.assign(invoiceForm, {
      qymc: customerBoard.value.qymc || "",
      khbh: customerBoard.value.khbh || "",
      yyzzh: "",
      zt: "",
      jflx: "",
      kpqymc: "",
      kpsh: "",
      kplx: "",
    });
  }
  invoiceEditDialogVisible.value = true;
}
function submitInvoiceForm() {
  invoiceFormRef.value.validate?.((valid) => {
    if (valid === false) return;
    addInvoice({ ...invoiceForm }).then((res) => {
      if (res.code === 200) {
        invoiceEditDialogVisible.value = false;
        getZhInfo();
        // 刷新外部tab
        getList();
      }
    });
  });
}
const currentYear = ref(new Date().getFullYear());
// function getThisYearStr(){
//   currentYear.value=new Date().getFullYear();
// };

// 新增：获取客户开票数据看板
function getInvoiceBoard() {
  receivableDetailCustomerInvoiceBoard({
    year: currentYear.value,
    khbh: drawerKhbh.value,
    zt: noInvoiceQuery.zt,
  }).then((res) => {
    invoiceBoard.value = res.data || {};
  });
}

// 新增：未收电费多选相关
const selectedUnpaidRows = ref([]);
function handleUnpaidSelectionChange(rows) {
  selectedUnpaidRows.value = rows;
}

// 批量缴费弹窗相关
const batchPayDialogVisible = ref(false);
const batchPayForm = reactive({
  ysje: '',
  zjly: '缴费', // 默认选择缴费
});
const batchPayTotalWsje = ref(0);
const batchPayTotalZnysje = ref(0);
const zjlyOptionsPay = [
  { label: '缴费', value: '缴费' },
  { label: '内转', value: '内转' },
  { label: '坏账', value: '坏账' },
];

// 充值弹窗相关
const rechargeDialogVisible = ref(false);
const rechargeForm = reactive({
  czje: '',
  fylx: '',
  zjly: '充值', // 默认选择充值
});
const rechargeTypeOptions = [
  { label: '电费', value: '电费' },
  { label: '空调费', value: '空调费' },
];
const zjlyOptionsRecharge = [
  { label: '充值', value: '充值' },
  { label: '内转', value: '内转' },
  { label: '坏账', value: '坏账' },
];

function openBatchPayDialog() {
  // 统计勾选行的wsje和znysje总和
  let totalWsje = 0;
  let totalZnysje = 0;
  selectedUnpaidRows.value.forEach(row => {
    totalWsje += Number(row.wsje) || 0;
    totalZnysje += Number(row.znysje) || 0;
  });
  batchPayTotalWsje.value = totalWsje;
  batchPayTotalZnysje.value = totalZnysje;
  batchPayForm.ysje = (totalWsje + totalZnysje).toFixed(2);
  batchPayForm.zjly = '缴费';
  // 后付费弹批量缴费弹窗，预付费弹充值弹窗
  if (customerBoard.value.jflx == 1) {
    batchPayDialogVisible.value = true;
  } else if (customerBoard.value.jflx == 2) {
    rechargeForm.czje = '';
    rechargeForm.fylx = '';
    rechargeForm.zjly = '充值';
    rechargeDialogVisible.value = true;
  }
}

function submitBatchPay() {
  if (!batchPayForm.ysje || isNaN(Number(batchPayForm.ysje)) || Number(batchPayForm.ysje) <= 0) {
    proxy.$modal.msgWarning("请输入正确的缴费金额");
    return;
  }
  if (selectedUnpaidRows.value.length === 0) {
    proxy.$modal.msgWarning("请勾选需要缴费的电费单");
    return;
  }
  // 构造参数，假设接口支持批量缴费
  const ids = selectedUnpaidRows.value.map(row => row.hkid);
  const params = {
    hkid: ids.join(','), // 逗号分隔的电费单号
    zhkje: batchPayForm.ysje,
    khbh: customerBoard.value.khbh || '',
    zt: customerBoard.value.zt || '',
    qymc: customerBoard.value.qymc || '',
    zjly: batchPayForm.zjly,
    // 可扩展其他参数
  };
  // 调用模拟缴费接口
  simulatePayment(params).then((res) => {
    if (res.code === 200) {
      proxy.$modal.msgSuccess("批量缴费成功（模拟）");
      batchPayDialogVisible.value = false;
      // 缴费后刷新列表
      getUnpaidList && getUnpaidList();
      getPaidList();
      selectedUnpaidRows.value = [];
    } else {
      proxy.$modal.msgError(res.msg || "批量缴费失败（模拟）");
    }
  });
}

function submitRecharge() {
  if (!rechargeForm.czje || isNaN(Number(rechargeForm.czje)) || Number(rechargeForm.czje) <= 0) {
    proxy.$modal.msgWarning('请输入正确的充值金额');
    return;
  }
  if (!rechargeForm.fylx) {
    proxy.$modal.msgWarning('请选择费用类型');
    return;
  }
  const params = {
    czje: rechargeForm.czje,
    fylx: rechargeForm.fylx,
    qymc: customerBoard.value.qymc || '',
    khbh: customerBoard.value.khbh || '',
    zt: customerBoard.value.zt || '',
    zjly: rechargeForm.zjly,
  };
  simulateRecharge(params).then((res) => {
    if (res.code === 200) {
      proxy.$modal.msgSuccess('充值成功（模拟）');
      rechargeDialogVisible.value = false;
      getUnpaidList && getUnpaidList();
      getPaidList();
      selectedUnpaidRows.value = [];
    } else {
      proxy.$modal.msgError(res.msg || '充值失败（模拟）');
    }
  });
}
// 监听tab切换，切换到开票明细时刷新看板
watch(drawerTab, (val) => {
  if (val === "invoice" && drawerKhbh.value) {
    getInvoiceBoard();
  }
});
// 初始化
onMounted(() => {
  getCarrierList();
  getList();
});
</script>

<style scoped>
.query-form {
  margin-bottom: 10px;
}
.dashboard {
  background: #fafdff;
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(32, 159, 240, 0.1);
  padding: 28px 18px 18px 18px;
  margin-bottom: 36px;
}
.dashboard-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 0;
}
.dashboard-item {
  flex: 1;
  margin-right: 0;
  /* background: linear-gradient(135deg, #eaf6ff 0%, #fafdff 100%); */
  border-radius: 14px;
  padding: 22px 0 16px 0;
  text-align: center;
  box-shadow: 0 2px 8px rgba(32, 159, 240, 0.06);
  border: 1.5px solid #e6f3fc;
  transition: box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.dashboard-item:not(:last-child) {
  margin-right: 18px;
}
.label {
  font-size: 16px;
  color: #fff;

  display: block;
  margin-bottom: 10px;
  letter-spacing: 1px;
  font-weight: 500;
}
.value {
  font-size: 30px;
  font-weight: bold;
  color: #fff;

  display: block;
  letter-spacing: 1px;
  line-height: 1.2;
}
/* .value.highlight {
  color: #209ff0;
} */
.board-blue {
  background-color: #209ff0;
  color: #fff;
}
.board-green {
  background-color: #67c23a;
  color: #fff;
}
.board-orange {
  color: #fff;

  background-color: #faad14;
}
.board-red {
  color: #fff;
  background-color: #f56c6c;
}
</style>
